<script setup lang="ts">

import { reactive } from 'vue'
import { Toast } from 'vant';
import { getSystemDetailsAPI } from '@/api/message'
import { useRoute, useRouter } from 'vue-router';

    const route = useRoute()
    const router = useRouter()
    const messageId = route.params.id

    const state = reactive({
        item: '',
    })
   
    // 点击返回 关闭弹窗
    const onClickLeft = () => router.back()
    
    // 获取任务详情列表
    const getSystemDetails = async() => {
        const res = await getSystemDetailsAPI({
            id: messageId
        })
        console.log(res);
        
        if (res) {
            state.item = res[0]
        }else{
            Toast(res.msg)
        }
    }
    getSystemDetails()
</script>


<template>
    <van-nav-bar
        title="消息详情"
        left-arrow
        @click-left="onClickLeft"
    />
    <h3>{{ state.item.title }}</h3>
    <p>{{ state.item.content }}</p>

</template>

<style scoped>
h3 {
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: 400;
    color: #333;
    margin: 1.7rem 0.75rem 0.83rem;
}
p {
    font-size: 0.69rem;
    font-weight: 500;
    color: #666;
    line-height: 1.23rem;
    text-indent: 2em;
}
</style>